<template>
    <div class="click-rank">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-button style="padding: 3px 0" type="text">
                    <i class="fa fa-hand-pointer-o"></i>
                    点击排行
                </el-button>
            </div>
            <div v-for="o in 10" :key="o" class="text-item">
                <span :class="isTopThree(o)">{{o}}</span> <span class="text-center">{{'纯CSS实现文章左上角Flag标签纯CSS实现文章左上角Flag标签 ' + o }}</span>
            </div>

        </el-card>
    </div>
</template>

<script>
    export default {
        name: "ClickRank",
        data(){
            return {
            }
        },
        methods:{
            isTopThree(o){
                if(o<=3){
                    return "ico text-center bg-red";
                }else{
                    return "ico text-center bg-blue";

                }
            }
        }
    }
</script>

<style scoped>
    .click-rank {
        margin-top: 20px;
    }

    .bg-red {
        background-color: #f96c6c;
    }

    .bg-blue {
        background-color: #409EFF;
    }

    .text-center {
        width: 24px;
        height: 24px;
        font-size: 12px;
        text-align: center;
        line-height: 24px;
    }

    .ico {
        border-radius: 50%;
        color: white;
        display: inline-block;
        margin-left: 5px;
        margin-right: 5px;

    }
    .text-item{
        padding: 7px;
        width: 85%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
</style>